<!DOCTYPE html>
<html lang="zh_CN">
<head>
    <meta charset="utf-8"/>
    <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
    <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1">
    <title>产品</title>
    <link rel="stylesheet" href="${ctxPath}/assets/libs/layui/css/layui.css"/>
    <link rel="stylesheet" href="${ctxPath}/assets/module/admin.css">
    <!--[if lt IE 9]>
    <script src="https://oss.maxcdn.com/html5shiv/3.7.3/html5shiv.min.js"></script>
    <script src="https://oss.maxcdn.com/respond/1.4.2/respond.min.js"></script>
    <![endif]-->
</head>
<body>
<!-- 正文开始 -->
<div class="layui-fluid">
    <div class="layui-card">
        <div class="layui-card-body">
            <!-- 表格工具栏 -->
            <form class="layui-form toolbar">
                <div class="layui-form-item">
                    <div class="layui-inline">
                        <label class="layui-form-label">标题:</label>
                        <div class="layui-input-inline">
                            <input name="title" class="layui-input" placeholder="请输入标题"/>
                        </div>
                    </div>
                    <div class="layui-inline">
                        <label class="layui-form-label">发布状态:</label>
                        <div class="layui-input-inline">
                            <input name="status" class="layui-input" placeholder="请输入发布状态"/>
                        </div>
                    </div>
                    <div class="layui-inline">
                        <label class="layui-form-label">发布时间:</label>
                        <div class="layui-input-inline">
                            <input type="text" name="publishTime" id="publishTimeId" placeholder="请选择发布时间" class="layui-input">
                        </div>
                    </div>
                    <div class="layui-inline">&emsp;
                        <button class="layui-btn icon-btn" lay-filter="tableSearch" lay-submit>
                            <i class="layui-icon">&#xe615;</i>搜索
                        </button>
                        <button type="reset" class="layui-btn layui-btn-primary icon-btn">
                            <i class="layui-icon">&#xe669;</i>重置
                        </button>
                    </div>
                </div>
            </form>
            <!-- 数据表格 -->
            <table id="dataTable" lay-filter="dataTable"></table>
        </div>
    </div>
</div>

<!-- 表格操作列 -->
<script type="text/html" id="tableBar">
    <a class="layui-btn layui-btn-primary layui-btn-xs" perm-show="product:edit" lay-event="edit">编辑</a>
    <a class="layui-btn layui-btn-danger layui-btn-xs" perm-show="product:delete" lay-event="delete">删除</a>
</script>

<!-- js部分 -->
<script src="${ctxPath}/assets/libs/layui/layui.js"></script>
<script src="${ctxPath}/assets/js/common.js"></script>
<script>
    layui.use(['layer', 'table', 'tableX', 'notice', 'xnUtil', 'laydate'], function () {
        var $ = layui.jquery;
        var layer = layui.layer;
        var table = layui.table;
        var tableX = layui.tableX;
        var admin = layui.admin;
        var form = layui.form;
        var notice = layui.notice;
        var xnUtil = layui.xnUtil;
        var laydate = layui.laydate;

        //日期时间选择器
        laydate.render({
            elem: 'publishTimeId'
            ,type: 'datetime'
        });

        /* 渲染表格 */
        var insTb = tableX.render({
            elem: '#dataTable',
            url: getProjectUrl() + 'product/page',
            page: true,
            toolbar: ['<p>',
                '<button lay-event="add" perm-show="product:add" class="layui-btn layui-btn-sm icon-btn"><i class="layui-icon">&#xe654;</i>添加</button>&nbsp;',
                '<button lay-event="delete" perm-show="product:delete" class="layui-btn layui-btn-sm layui-btn-danger icon-btn"><i class="layui-icon">&#xe640;</i>删除</button>',
                '</p>'].join(''),
            cellMinWidth: 100,
            cols: [
                [
                    {type: 'checkbox',fixed: 'left'},
                    {field: 'title',width: 200, title: '标题', sort: true,fixed: 'left'},
                    {field: 'imageSrc',width:160, title: '图片', sort: true,fixed: 'left',templet: function (item) {
                            return '<img onclick="showBigImage(this)" id="driimg" style="display: inline-block; width: 100%; height: 100%;" src="'+ getProjectUrl() +item.imageSrc+'">';}},
                    {field: 'tags', title: '标签', sort: true},
                    {field: 'catalogName',width: 140, title: '分类名称', sort: true},
                    {field: 'keywords',width: 100, title: '关键词', sort: true},
                    {field: 'status',width: 120, title: '发布状态', sort: true, templet:function (d) {  return xnUtil.rendDataTableDict(d.status, 'release_status'); }},
                    {field: 'publishTime', title: '发布时间', sort: true,width: 110,templet: "<div>{{layui.util.toDateString(d.publishTime, 'yyyy-MM-dd')}}</div>"},
                    {field: 'orderNum', title: '序号', sort: true},
                    {field: 'isTop', title: '置顶', sort: true, templet:function (d) {  return xnUtil.rendDataTableDict(d.isTop, 'yes_or_no');}},
                    {field: 'createUserName',width: 100, title: '创建人', sort: true},
                    {field: 'updateUserName',width: 100, title: '更新人', sort: true},
                    {title: '操作', toolbar: '#tableBar', align: 'center',minWidth: 200,fixed: 'right'}
                ]
            ],
            done: function(res, curr, count) {
                // 该方法用于解决,使用fixed固定列后,行高和其他列不一致的问题
                currpage = curr;
                $(".layui-table-main  tr").each(function (index, val) {
                    $($(".layui-table-fixed .layui-table-body tbody tr")[index]).height($(val).height());
                });

                $("[data-field='lowerHairPath']").css('display', 'none');
                $(".layui-table-main tr").each(function (index, val) {
                    $($(".layui-table-fixed-l .layui-table-body tbody tr")[index]).height($(val).height());
                    $($(".layui-table-fixed-r .layui-table-body tbody tr")[index]).height($(val).height());
                });
                //动态监听表头高度变化，冻结行跟着改变高度
                $(".layui-table-header tr").resize(function () {
                    $(".layui-table-header tr").each(function (index, val) {
                        $($(".layui-table-fixed .layui-table-header table tr")[index]).height($(val).height());
                    });
                });
                //初始化高度，使得冻结行表头高度一致
                $(".layui-table-header tr").each(function (index, val) {
                    $($(".layui-table-fixed .layui-table-header table tr")[index]).height($(val).height());
                });
                //动态监听表体高度变化，冻结行跟着改变高度
                $(".layui-table-body tr").resize(function () {
                    $(".layui-table-body tr").each(function (index, val) {
                        $($(".layui-table-fixed .layui-table-body table tr")[index]).height($(val).height());
                    });
                });
                //初始化高度，使得冻结行表体高度一致
                $(".layui-table-body tr").each(function (index, val) {
                    $($(".layui-table-fixed .layui-table-body table tr")[index]).height($(val).height());
                });
            }
        });

        /* 表格搜索 */
        form.on('submit(tableSearch)', function (data) {
            insTb.reload({where: data.field, page: {curr: 1}});
            return false;
        });

        /* 表格工具条点击事件 */
        table.on('tool(dataTable)', function (obj) {
            /* 删除 */
            if (obj.event === 'delete') {
                layer.confirm('确定要操作该数据吗？', {
                    skin: 'layui-layer-admin',
                    shade: .1
                }, function () {
                    admin.req(getProjectUrl() + 'product/delete', JSON.stringify([{'id': obj.data.id}]), function(res){
                        layer.msg(res.message, {icon: 1, time: 1000}, function () {
                            insTb.reload();
                        });
                    }, 'post');
                });
            }
            /* 编辑 */
            if (obj.event === 'edit') {
                admin.putTempData('articleId', obj.data.id);
                admin.putTempData("source","product")
                admin.putTempData("editData",obj.data)
                window.location.href = getProjectUrl() + 'articlecontent/index';
            }
        });

        /* 表格头工具栏点击事件 */
        table.on('toolbar(dataTable)', function (obj) {
            if (obj.event === 'add') { // 添加
                admin.putTempData("source","product");
                admin.putTempData("editData",null);
                admin.putTempData('articleId', null);
                window.location.href = getProjectUrl() + 'articlecontent/index';
            }
            if (obj.event === 'delete') { // 删除
                var checkRows = table.checkStatus('dataTable');
                if (checkRows.data.length === 0) {
                    notice.msg('请选择要操作的数据', {icon: 2});
                    return;
                }
                layer.confirm('确定要操作该数据吗？', {
                    skin: 'layui-layer-admin',
                    shade: .1
                }, function () {
                    var ids = checkRows.data.map(function (d) {
                        return {"id": d.id};
                    });
                    admin.req(getProjectUrl() + 'product/delete', JSON.stringify(ids), function(res){
                        layer.msg(res.message, {icon: 1, time: 1000}, function () {
                            insTb.reload();
                        });
                    }, 'post');
                });
            }
        });
    });
</script>
</body>
<style>
    .layui-table-cell{
        text-align:center;
        height: auto;
        white-space: normal;
    }
</style>
</html>
